<template>
	<div id="orderconfirm">
		<v-header>
			<price-header ref="priceHeader"></price-header>
		</v-header>
		<v-content>
			<div class="width-1200">
				<div class="title"><span>填写订单</span></div>
				<div class="address">
					<div class="confirm-address my-flex-between">
						<span>确认收货地址</span>
						<span class="hover" style="font-weight: normal;" @click="changeRouter('/address')">管理收货地址</span>
					</div>
					<div class="address-list">
						<li class="one-list my-flex-between" :class="[{isDefault:item.defaultAddress}]" v-for="item in addressList">
							<img class="icon-address" v-if="params.address.id==item.id" src="../../assets/order/icon_address_detail.png" alt="" />
							<div class="hover" @click="selectAddress(item)">
								<img v-if="params.address.id==item.id" src="../../assets/order/icon_cir_detail_sel.png" alt="" />
								<img v-else src="../../assets/order/icon_cir_detail_nor.png" alt="" />
								<span>({{item.name}}  {{item.tel}}) {{item.addressPre}}{{item.addressDetail}}</span>
								<template v-if="!item.isNotAddress">
									<span v-if="item.defaultAddress" class="moren hover">默认地址</span>
									<span v-else class="moren hover" @click.stop="setDefaultAddr(item)">设为默认地址并使用</span>
								</template>

							</div>
							<!--<span class="edit">编辑</span>-->
						</li>
					</div>
				</div>

				<!--确认订单页面-->
				<div class="order-info">
					<div class="confirm-address">
						<span>确认订单信息</span>
					</div>
					<div class="lists">
						<div class="tds">
							<el-table :data="[]" style="width: 100%">
								<el-table-column label="商品名称" width="400"></el-table-column>
								<el-table-column label="单价" width="400"></el-table-column>
								<el-table-column label="商品数量" width="440"></el-table-column>
							</el-table>
						</div>

						<div class="company">
							<!--{{tableData}}-->
							<template v-for="item in tableData">
								<div class="title">
									<img src="../../assets/centers/icon_store.png" alt="" />
									<span>{{item.traffickerName}}</span>
								</div>
								<el-table :data="item.list" style="width: 100%">
									<el-table-column prop="productName" width="400"></el-table-column>
									<el-table-column prop="priceCN" width="400"></el-table-column>
									<el-table-column prop="count" width="400">
										<template slot-scope="scope">
											<span>{{scope.row.qty}}</span>
										</template>
									</el-table-column>
								</el-table>
								<div class="message my-flex-between">
									<div class="my-flex-left">
										<span class="liuyan">给贸易商留言:</span>
										<el-input size="medium" v-model="item.leavemsg" maxlength="30"></el-input>
									</div>
									<div class="total-price my-flex-right">
										<span>共计{{item.list.length}}件商品</span>
										<span>预估运费:¥{{item.freightCharge}} &#x3000;  </span>
										<span>合计金额: <span class="color-red">¥ {{item.realPriceCN}}</span></span>
									</div>
								</div>
							</template>

						</div>
					</div>
				</div>
				<!--下单-->
				<div class="pay">
					<div>
						<li><span>实付款:</span><span class="price">{{totalMoney}}</span></li>
						<li class="address-info my-flex-right"><span>寄送至:</span>
							<div style="text-align: justify;" v-if="params.address&&params.address.addressPre">{{this.params.address.addressPre}}</div>
						</li>
						<li><span>收货人:</span><span>{{this.params.address.name}}</span></li>
					</div>
					<li class="topay my-btn" @click="creatOrder">下 单</li>
				</div>
			</div>
		</v-content>
	</div>
</template>

<script>
	import service from '@/js/services/order/orderconfirm';
	export default {
		components: {

		},
		data() {
			return {
				addressList: [],
				tableData: [],
				totalMoney: null,
				params: {
					address: {},
					ids: '',
					subjectId: 0,
					traffickerId: 0
				},
				currentAddress: {

				}
			}
		},
		mounted() {
			this.params = this.$store.state.confrimorder;
			console.log(this.params)
			this.initData();
			this.getAddressList();

		},
		methods: {
			...service,
			async initData() {
				let self = this;
				this.params = this.$store.state.confrimorder;
				console.log(this.params)
				if(this.params && this.params.address && this.params.address.id) {
					this.orderPreview();
				} else {
					this.getDefaultAddress();
				}
			},
			changeAddress() {
				for(let item of this.addressList) {
					if(item.defaultAddress) {
						this.params.address = item;
						break;
					}
				}
			},
			creatOrder() {
				this.orderAdd();
				console.log(this.orderAdd)
			},
			GoSelectAddress() {
				this.$store.commit('changeValue', {
					name: 'isSelectAddress',
					value: true
				})
				this.$router.push({
					path: '/addrmanage'
				});
			},
			selectAddress(item) {
				console.log(item)
				this.params.address = item;
			},
			changeRouter(url) {
				this.$router.push(url);
			}
		}
	}
</script>

<style lang="less" src="../../less/page/order/orderconfirm.less"></style>